<!--
 * @Author: your name
 * @Date: 2020-07-22 17:28:34
 * @LastEditTime: 2020-09-03 12:05:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \web3.0\src\views\functional\toolbar-top.vue
-->

<template>
  <div class="toolbar-wrap">
    <div class="toolbar-left">
      <slot name="leftPrefix"></slot>
      <slot name="left">
        <template v-for="item in left" :key="item.handleName">
          <a-button :type="item.type || ''" @click="handleClick(item)" :size="item.size || 'default'">
            {{ item.text }}
          </a-button>
        </template>
      </slot>
      <slot name="leftSuffix"></slot>
    </div>
    <div class="toolbar-right">
      <template v-for="item in right" :key="item.name"></template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToolbarTop',
  props: {
    left: {
      type: Array,
      default: () => []
    },
    right: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    function handleClick(item, e) {
      emit(item.handleName, e);
    }
    return {
      handleClick
    };
  }
};
</script>

<style lang="scss" scoped>
.toolbar-wrap {
  display: flex;
  justify-content: space-between;
  padding: 12px 10px 10px;
}
.toolbar-right {
  display: flex;
}
</style>
